<?php
// pr($charts);
?>

	<div class="row-fluid pull-left" style="padding-top: 20px;" >
		<div>
			<div class="portlet-template hidden">
			        <div class="title"></div>
			        <div class="content">
						<div class="chart" style='height:90%;width:90%;' ></div>
			        </div>
			</div>
		</div>
		<div id="container1" class="span4 pull-left" style="margin-left: 1.5%;">
			<?php foreach ($charts as $key => $chart) { ?>
				<div class="portlet">
				        <div class="title"><?php echo $chart["Chart"]["descr"]; ?></div>
				        <div class="content">
							<div id='<?php echo $chart["Chart"]["code"]; ?>' style='height:90%;width:90%;' ></div>
				        </div>
				</div>
			<?php } ?>
		</div>
		<div id="container2" class="span4 pull-left" style="margin-left: 1.5%;">
		</div>
		<div id="container3" class="span4 pull-left" style="margin-left: 1.5%;">
		</div>
	</div>

<script>

	$(document).ready(function(){

	  <?php foreach ($charts as $key => $chart) { ?>
	  	  writePortlet(<?php json_encode($chart); ?>);
		  drawChart('<?php echo $chart["Chart"]["code"]; ?>','<?php echo $chart["Chart"]["code"]; ?>','');
	  <?php } ?>

	    $("#container1,#container2,#container3").sortable({
	            handle: ".title",
	            placeholder: "placeholder",
	            connectWith: ".container"
	    });
	    $("#container1,#container2,#container3").disableSelection();
		setFlash("Caricamento grafici eseguito");
	});

    function refreshCharts() {
    	var url = '<?php echo $this->webroot;?>Chart/refresh';
        $.getJSON( url, function( data ) {
           if(!data.success){
          		setFlash(data.message,data.message_level);
           } else {
       			// rimuovo tutti i portlet
	   			$('.portlet').remove();
                // console.time("check");
           		if (data.charts.length>0) {
           			for (var i=0; i<data.charts.length; i++) {
           				writePortlet(data.charts[i]);
           			}
           		} else {
					setFlash("Nessun chart configurato.");
           		}
	            $('#loading').hide();
           }
         });
    }


	function writePortlet(chart) {
		// console.log(notifica.Notifica.url);
		webroot='<?php echo $this->webroot; ?>';
		portletElement = $('#portlet-template').clone();
		portletElement.attr('id','');
		portletElement.addClass('portlet');
		// portletElement.children('div.thumb').css('background','url('+webroot+chart.Notifica.thumb+')');
		// divTitleElement = portletElement.find('div');
		portletElement.children('div.title').html(chart.Chart.descr);
		portletElement.children('div.chart').attr('id',chart.Chart.code);
		portletElement.removeClass('hidden');
		portletElement.prependTo($('#scroll'));
	}
    



</script>